<template>
  <view class="authentication-phone-page">
    <view class="form">
      <view class="form-item">
        <input
          class="input"
          type="number"
          :maxlength="11"
          name="phone"
          v-model="sForm.phone"
          placeholder="请输入手机号"
        />
      </view>
      <view class="form-item">
        <input
          name="code"
          class="input phone-code"
          v-model="sForm.code"
          placeholder="请输入验证码"
        />
        <view class="get-code" @click="sendCode">
          {{ isSending ? countdown + "s" : "| " + codeTxt }}</view
        >
      </view>
    </view>
    <view class="footer-btn" @click="save">
      <view class="btn-box">
        <text>确认</text>
      </view>
    </view>
  </view>
</template>

<script>
import WxValidate from "@/utils/WxValidate";
import { sendCodeMessage, checkPhoneCode, login } from "@/config/api";
import { mapActions } from "vuex";

export default {
  data() {
    return {
      sForm: {
        phone: "",
        code: "",
      },
      codeTxt: "获取验证码",
      countdown: 60,
      isSending: false,
    };
  },
  onLoad() {
    this.initValidate();
  },
  methods: {
    ...mapActions({
      userInfo_onInit: "userInfo/onInit",
    }),
    sendCode() {
      this.WxValidate.checkForm(this.sForm);
      let errorMsg = this.WxValidate.errorList.find(
        (item) => item.param === "phone"
      );
      if (errorMsg) {
        uni.showToast({ title: errorMsg.msg, icon: "none" });
        return false;
      }
      if (this.isSending) {
        return;
      }
      this.isSending = true;
      this.sendMessage();
      const interval = setInterval(() => {
          this.countdown--;
          if (this.countdown <= 0) {
            this.isSending = false;
            this.codeTxt = "重新发送";
            this.countdown = 60;
            clearInterval(timer); // 清除计时器
          }
        }, 1000),
        timer = interval;
    },
    sendMessage() {
      sendCodeMessage({
        phone: this.sForm.phone,
      })
        .then((res) => {
          if (res.code == 200) {
            uni.showToast({ title: "短信发送成功！", icon: "none" });
          }
        })
        .catch((res) => console.log("短信发送失败", res));
    },
    initValidate() {
      const rules = {
        phone: { required: true, tel: true },
        code: { required: true },
      };
      const message = {
        phone: { required: "请输入手机号！", tel: "请输入正确的手机号！" },
        code: { required: "请输入验证码" },
      };
      this.WxValidate = new WxValidate(rules, message);
    },
    save() {
      const isValidate = this.WxValidate.checkForm(this.sForm);
      if (!isValidate) {
        const errorList = this.WxValidate.errorList;
        uni.showToast({ title: errorList[0].msg, icon: "none" });
        return false;
      } else {
        checkPhoneCode({ phone: this.sForm.phone, code: this.sForm.code }).then(
          (res) => {
            if (res.code === 200) {
              uni.showToast({ title: "认证成功！",icon:"none" });
              login().then((res) => {
                this.userInfo_onInit();
                this.toURL("", {}, { type: "back" });
              });
            } else {
              uni.showToast({ title: res.msg || "操作失败！", icon: "none" });
            }
          }
        );
      }
    },
  },
};
</script>

<style lang="scss">
.authentication-phone-page {
  .form {
    margin-top: 40rpx;

    .form-item {
      position: relative;
      margin: 0rpx 32rpx 24rpx;
      height: 96rpx;
      background: #ffffff;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      border: 1px solid rgba(0, 0, 0, 0.2);

      input {
        height: 96rpx;
        padding: 0 24rpx;
        font-size: 28rpx;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.9);
        line-height: 96rpx;
      }

      .phone-code {
        padding-right: 200rpx;
      }

      .get-code {
        position: absolute;
        right: 24rpx;
        top: 28rpx;
        font-size: 28rpx;
        font-weight: 400;
        color: #ff5000;
        line-height: 40rpx;
      }
    }
  }

  .footer-btn {
    position: fixed;
    bottom: 0;
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0rpx 14rpx 58rpx 0rpx rgba(100, 100, 111, 0.2);
    background: #ffffff;
    height: calc(124rpx + env(safe-area-inset-bottom));
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    .btn-box {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      width: 686rpx;
      height: 80rpx;
      background: #ff5000;
      border-radius: 44rpx 44rpx 44rpx 44rpx;
    }
    text {
      font-size: 32rpx;
      font-weight: 400;
      color: #ffffff;
      line-height: 32rpx;
    }
  }
}
</style>
